<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/css/campusDataSummary.css">
	<link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">
	<link rel="stylesheet" href="/scriptZIP/index.css">

	<title>校园数据</title>

	<style>
		[v-cloak] {
			display: none;
		}

		/* 修改element时间样式 */
		.line_title .el-input {
			width: 150px;
			margin-right: 20px;
		}

		.line_title .el-input__inner {
			height: 30px !important;
			line-height: 30px !important;
		}

		.line_title .el-input__icon {
			line-height: 30px !important;
		}

		.echart_div .el-input {
			width: 150px;
			margin-right: 20px;
		}

		.echart_div .el-input__inner {
			height: 30px !important;
			line-height: 30px !important;
		}

		.echart_div .el-input__icon {
			line-height: 30px !important;
		}

		.month_item .el-date-picker__header {
			display: none !important;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<!-- <div class="top"> -->
		<div class="head">
			<div class="head_top">
				<div class="head_item">
					<img src="/wechat//image/rexueLogo.png">
				</div>
				<div class="head_right">
					<div class="head_item">
						<div id="date-time-container">
							<span id="current-date"></span>
							<span id="current-day-time"></span>
						</div>
					</div>
					<div class="head_item_img">
						<img src="/wechat//image/rexue1.png">
					</div>
				</div>
			</div>
		</div>
		<div class="content">
			<!-- 图表1 -->
			<div class="content_left">
				<div class="pie_box" style="width: 100%;">
					<div class="pie_box_item_box">
						<div class="pie_box_item pie_box_item1">
							<div class="pie_box_i_text1">{{yuanData.totalCampuses||0}}</div>
							<div class="pie_box_i_text2">校区总数量</div>
						</div>
						<div class="pie_box_item pie_box_item2">
							<div class="pie_box_i_text1">{{yuanData.activeCampuses||0}}</div>
							<div class="pie_box_i_text2">有效运营数量</div>
						</div>
					</div>
					<div class="pie_box_item_box pie_box_item_box2">
						<div class="pie_box_item pie_box_item1">
							<div class="pie_box_i_text1">{{yuanData.totalStudents||0}}</div>
							<div class="pie_box_i_text2">学生总数量</div>
						</div>
						<div class="pie_box_item pie_box_item2">
							<div class="pie_box_i_text1">{{yuanData.qian||0}}</div>
							<div class="pie_box_i_text2">今日签到数量</div>
						</div>
						<div class="pie_box_item pie_box_item3">
							<div class="pie_box_i_text1">{{(yuanData.totalIncome/100)||0}}</div>
							<div class="pie_box_i_text2">总收入</div>
						</div>
					</div>
					<div class="pie_box_item_box pie_box_item_box3">
						<div class="pie1" style="width: 280px;height:200px;">
							<v-chart :option="option1" />
						</div>
						<div class="pie2" style="width: 280px;height:200px;">
							<v-chart :option="option2" />
						</div>
					</div>

				</div>
				<!-- 图表2 -->
				<div class="chart_box">
					<!-- 添加下拉选择框 -->
					<div class="echart_div">
						<div class="bar_title">新增校区</div>
						<el-date-picker v-model="year3" type="year" format="yyyy" value-format="yyyy" placeholder="选择年"
							:clearable="false" @change="getCountSchool()"></el-date-picker>
					</div>
					<div id="main3" class="chart" style="width: 100%;height: 250px;">
						<v-chart :option="option3" />
					</div>
				</div>
			</div>
			<!-- 学生新增趋势 -->
			<div class="content_right">
				<!-- 图表3 -->
				<div class="content_right_chart_box">
					<div class="line_title">
						<span>学生新增趋势</span>
						<div class="bar_title_itme">
							<el-date-picker v-model="year1" type="year" format="yyyy" value-format="yyyy"
								placeholder="选择年" :clearable="false" @change="changeLine(1)"></el-date-picker>
							<div class="month_item">
								<el-select v-model="month1" clearable placeholder="选择月" @change="changeLine(2)">
									<el-option v-for="item in options1" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>
						</div>
					</div>
					<div id="lineChart" class="chart" style="width: 100%;height: 320px;">
						<v-chart :option="optionLineChart" />
					</div>
				</div>
				<!-- 图表4 -->
				<!-- 收支明细 -->
				<div class="content_right_chart_box content_right_chart_box2">
					<div class="line_title">
						<span>收支明细</span>
						<div class="bar_title_itme">
							<el-date-picker v-model="year2" type="year" format="yyyy" value-format="yyyy"
								placeholder="选择年" :clearable="false" @change="changeLine4(1)"></el-date-picker>
							<div class="month_item">
								<el-select v-model="month2" clearable placeholder="选择月" @change="changeLine4(2)">
									<el-option v-for="item in options1" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</div>

						</div>
					</div>
					<div id="incomeExpenseDetail" class="chart" style="width: 100%; height: 280px;">
						<v-chart :option="incomeExpenseDetail" />
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/echarts.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/index.umd.min.js"></script>
	<script src="/scriptZIP/flatpickr.min.js"></script>
	<script src="/scriptZIP/zh.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<script src="/lib/vue-flatpickr.min.js"></script>
	<script src="/js/common.js"></script>

	<script>
		function updateTime() {
			var now = new Date();
			var year = now.getFullYear();
			var month = now.getMonth() + 1; // 月份是从0开始的
			var day = now.getDate();
			var hours = now.getHours();
			var minutes = now.getMinutes();
			var seconds = now.getSeconds();
			var dayOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];

			// 格式化日期和时间
			var formattedDate = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			var formattedTime = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
			var formattedDayTime = dayOfWeek + ' ' + formattedTime;

			// 显示当前时间
			document.getElementById('current-date').innerHTML = formattedDate;
			document.getElementById('current-day-time').innerHTML = formattedDayTime;
		}

		document.addEventListener('DOMContentLoaded', function () {
			updateTime();
			setInterval(updateTime, 1000); // 每秒钟更新一次
		});
		Vue.component('v-chart', VueECharts);
		Vue.component('flat-pickr', VueFlatpickr);

		var xs = [];
		for (var i = 27; i >= 0; i--)
			xs.push(dayjs().subtract(i, 'day').date());

		new Vue({
			el: '#app',
			data: {
				yuanData: {},//图表1数据
				pic1Data: [0, 0],//图表1，饼图1数据
				pic2Data: [0, 0, 0, 0, 0, 0, 0, 0],//图表1，饼图2数据
				schools: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//新增校区数据
				agentId: null,
				year1: dayjs().format('YYYY'),
				year2: dayjs().format('YYYY'),
				year3: dayjs().format('YYYY'),
				month1: '',
				month2: '',
				options1: [
					{ value: 1, label: '一月' },
					{ value: 2, label: '二月' },
					{ value: 3, label: '三月' },
					{ value: 4, label: '四月' },
					{ value: 5, label: '五月' },
					{ value: 6, label: '六月' },
					{ value: 7, label: '七月' },
					{ value: 8, label: '八月' },
					{ value: 9, label: '九月' },
					{ value: 10, label: '十月' },
					{ value: 11, label: '十一月' },
					{ value: 12, label: '十二月' },
				],
				data1: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
				shoudata2: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//收
				zhidata2: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],//支
			},
			created: function () {
				// var param = {};
				// try {
				// 	// 可能会报错的代码
				// 	if (/agent/.test(top.location.href)) {
				// 		this.agentId = top_params().id;
				// 		param = { params: { agentId: this.agentId } };
				// 	}
				// } catch (error) {
				// 	// 错误处理代码
				// 	console.log(error); // 输出错误信息
				// }
				this.getyuanData()
				this.getCountSchool()
				this.getInsertStudent(1)
				this.getCountOrder(1)
			},
			methods: {
				maxNum(data) {
					var max = Math.max(...data);
					return max + 10
				},
				// 转换数据
				changeData(shuju, num) {//shuju:数据 ，num:数量
					var arr = []
					var obj = {}
					for (var i = 1; i <= num; i++) {
						var found = false;
						for (var j = 0; j < shuju.length; j++) {
							if (shuju[j].source === i) {
								obj[i] = shuju[j].count;
								found = true;
								break;
							}
						}
						if (!found) {
							obj[i] = 0;
						}
					}
					arr = Object.values(obj)
					return arr;
				},
				changeData2(shuju, num) {//shuju:数据 ，num:数量
					var arr = []
					var obj = {}
					for (var i = 1; i <= num; i++) {
						var found = false;
						for (var j = 0; j < shuju.length; j++) {
							if (shuju[j].month === i) {
								obj[i] = shuju[j].count;
								found = true;
								break;
							}
						}
						if (!found) {
							obj[i] = 0;
						}
					}
					arr = Object.values(obj)
					return arr;
				},
				changeData3(shuju, num, type) {//shuju:数据 ，num:数量
					var arr = []
					var obj = {}
					for (var i = 1; i <= num; i++) {
						var found = false;
						for (var j = 0; j < shuju.length; j++) {
							if (type == 1 || !this.month1) {//加入!this.month1是为了在月份那里清空月份后刷新年份的数据
								if (shuju[j].month === i) {
									obj[i] = shuju[j].total_income;
									found = true;
									break;
								}
							} else {
								if (shuju[j].day === i) {
									obj[i] = shuju[j].total_income;
									found = true;
									break;
								}
							}
						}
						if (!found) {
							obj[i] = 0;
						}
					}
					arr = Object.values(obj)
					return arr;
				},
				//收入
				changeData4(shuju, num, type) {//shuju:数据 ，num:数量,type:1年份，2：月份
					var arr = []
					var obj = {}
					for (var i = 1; i <= num; i++) {
						var found = false;
						for (var j = 0; j < shuju.length; j++) {
							if (type == 1 || !this.month2) {//加入!this.month1是为了在月份那里清空月份后刷新年份的数据
								if (shuju[j].month === i) {
									obj[i] = shuju[j].totalIncome;
									found = true;
									break;
								}
							} else {
								if (shuju[j].day === i) {
									obj[i] = shuju[j].totalIncome;
									found = true;
									break;
								}
							}
						}
						if (!found) {
							obj[i] = 0;
						}
					}
					arr = Object.values(obj)
					return arr;
				},
				//支出
				changeData5(shuju, num, type) {//shuju:数据 ，num:数量
					var arr = []
					var obj = {}
					for (var i = 1; i <= num; i++) {
						var found = false;
						for (var j = 0; j < shuju.length; j++) {
							if (type == 1 || !this.month2) {//加入!this.month1是为了在月份那里清空月份后刷新年份的数据
								if (shuju[j].month === i) {
									obj[i] = shuju[j].totalExpense;
									found = true;
									break;
								}
							} else {
								if (shuju[j].day === i) {
									obj[i] = shuju[j].totalExpense;
									found = true;
									break;
								}
							}
						}
						if (!found) {
							obj[i] = 0;
						}
					}
					arr = Object.values(obj)
					return arr;
				},
				//获取图一的数据
				getyuanData() {
					axios.get('pc/home/yuan').then(function ({ data }) {
						this.yuanData = data
						var arr = [this.yuanData.kycampusStatus, this.yuanData.wkycampusStatus]
						this.pic1Data = arr
					}.bind(this));
					axios.get('pc/home/yuan1').then(function ({ data }) {
						var arr = this.changeData(data, 8)
						this.pic2Data = arr
					}.bind(this));
				},

				//获取新增校区
				getCountSchool() {
					axios.get('pc/home/countSchool', { params: { year: this.year3 } }).then(function ({ data }) {
						var arr = this.changeData2(data, 12)
						this.schools = arr
					}.bind(this));
				},
				//图表3选择时间
				changeLine(i) {
					if (i == 1) {
						this.month1 = ''
					}
					this.getInsertStudent(i)
				},
				//获取学生新增趋势
				getInsertStudent(type) {//type=1：年，2：月
					var param = {};
					var num = 12;
					if (type == 1) {
						param = { params: { year: this.year1 } }
					} else {
						num = dayjs().daysInMonth()
						param = { params: { year: this.year1, month: this.month1 } }
					}

					axios.get('pc/home/insertStudent', param).then(function ({ data }) {
						var arr = this.changeData3(data, num, type)
						this.data1 = arr
					}.bind(this));
				},
				//图表4选择时间
				changeLine4(i) {
					if (i == 1) {
						this.month2 = ''
					}
					this.getCountOrder(i)
				},
				//获取收支明细
				getCountOrder(type) {//type=1：年，2：月
					var param = {};
					var num = 12;
					if (type == 1) {
						param = { params: { year: this.year1 } }
					} else {
						num = dayjs().daysInMonth()
						param = { params: { year: this.year2, month: this.month2 } }
					}

					axios.get('pc/home/countOrder', param).then(function ({ data }) {
						console.log(data, '收支');
						var shouarr = this.changeData4(data, num, type)
						var zhiarr = this.changeData5(data, num, type)
						this.shoudata2 = shouarr
						this.zhidata2 = zhiarr
					}.bind(this));
				},

			},
			watch: {

			},
			computed: {
				option1: function () {
					var list = '未开业,已开业'.split(',');
					return {
						xAxis: {
							show: false,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							show: false,
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							/*是否显示图例 图谱位置 显示内容对应*/
							show: false,
							left: 'center',
							bottom: 50,
							data: list
						},
						series: [
							{
								name: '设备数量',
								type: 'pie',
								radius: '60%',/*图谱大小*/
								center: ['50%', '53%'],/*xy水平方位*/
								minAngle: 10,/*每块扇形最小占比*/
								label: {
									show: true,
									position: 'outside',//显示视觉引导线
								},
								labelLine: { //设置引导线长度
									show: true,
									length: 15,
									length2: 9,
									lineStyle: {
										// color: '#5793F3',
										width: 1,
										type: 'solid'
									}
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.pic1Data[i] };
								}.bind(this)),
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#feeacf', '#fbb958', '#66ac52', '#ffc032', '#549bd3', '#f47e39', '#934855', '#158968'];
											return colorList[params.dataIndex];
										}
									},
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
				},
				option2: function () {
					var list = '电话邀约,上门咨询,已选址未装修,转介绍,地推数据,家长分享,美团转化,其他'.split(',');
					return {
						xAxis: {
							show: false,/*x轴*/
							type: 'category',
							data: list
						},
						yAxis: {
							show: false,
							type: "value",
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)'
						},
						legend: {
							/*是否显示图例 图谱位置 显示内容对应*/
							show: false,
							left: 'center',
							bottom: 50,
							data: list,
						},
						series: [
							{
								name: '学生来源',
								type: 'pie',
								radius: '60%',/*图谱大小*/
								center: ['50%', '53%'],/*xy水平方位*/
								minAngle: 10,/*每块扇形最小占比*/
								label: {
									show: true,
									position: 'outside',//显示视觉引导线
								},
								labelLine: { //设置引导线长度
									show: true,
									length: 15,
									length2: 9,
									lineStyle: {
										// color: '#5793F3',
										width: 1,
										type: 'solid'
									}
								},
								data: list.map(function (it, i) {
									return { name: it, value: this.pic2Data[i] };
								}.bind(this)),
								itemStyle: {
									normal: {
										color: function (params) {
											var colorList = ['#cae6fe', '#739ffe', '#66ac52', '#ffc032', '#549bd3', '#f47e39', '#934855', '#158968'];
											return colorList[params.dataIndex];
										}
									},
								},
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}
						]
					};
				},
				optionLineChart: function () {
					var num = 12
					if (this.month1) {
						num = dayjs().daysInMonth()
					}
					return {
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							// boundaryGap: false,//占满两端
							data: Array.from({ length: num }, (_, i) => i + 1),
						},
						yAxis: {
							type: 'value',
							max: this.maxNum(this.data1), // Y轴最大值
						},
						series: [
							{
								data: this.data1, // 随机生成0到80之间的数据
								type: 'line',
								smooth: true,
								areaStyle: { // 设置为堆叠面积图
									color: 'rgba(135, 206, 250, 0.6)' // 浅蓝色
								},
								stack: 'Total', // 使其堆叠
								itemStyle: {
									color: 'rgb(135, 206, 250)', // 浅蓝色
								},
							},
						],
					};
				},

				incomeExpenseDetail: function () {
					var num = 12
					if (this.month2) {
						num = dayjs().daysInMonth()
					}
					return {
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: ['支出', '收入'],
							icon: 'rect',// 图例按钮改成正方形
							type: 'plain',
							right: 30,
							top: 20,
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							// boundaryGap: false,
							data: Array.from({ length: num }, (_, i) => i + 1),
						},
						yAxis: {
							type: 'value',
							name: '学生数量/位',
						},
						series: [
							{
								name: '支出',
								type: 'line',
								// stack: '总量',
								areaStyle: {},
								smooth: true,
								itemStyle: {
									color: '#fcceb9'
								},
								data: this.zhidata2,
							},
							{
								name: '收入',
								type: 'line',
								smooth: true,
								// stack: '总量',
								areaStyle: {},
								itemStyle: {
									color: '#87cefa'
								},
								data: this.shoudata2,
							}
						]
					};
				},

				option3: function () {
					var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

					return {
						xAxis: {
							type: 'category',
							data: months,
							axisLabel: {
								fontSize: 12, // 调整字体大小
							},
						},
						yAxis: {
							type: 'value',
							name: '校区/个',
							min: 0,
							max: this.maxNum(this.schools),
							// interval: 5,
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						series: [{
							name: '学校数量',
							type: 'bar',
							barWidth: '40%', // 调整柱状图宽度
							data: this.schools, // 取前12个月的数据
							itemStyle: {
								color: 'rgb(135, 206, 250)' // 蓝色
							},
						}]
					};
				},

			}
		})
	</script>
</body>

</html>